<template>
	<view class="wrapper">
		<u-sticky :h5-nav-height="0" :enable="stickyEnable">
			<view class="header-block">
				<view class="search-block">
					<u-search placeholder="请输入电站名称" v-model="keyword" @clear="doSearch" @search="doSearch"
						@custom="doSearch" />
				</view>

				<u-gap height="10" />

				<view class="tab-block">
					<u-tabs :list="tabs" :is-scroll="false" :current="current" @change="changeTab" :show-bar="false"
						active-color="#333" inactive-color="#999" font-size="28" />
					<u-line color="#f0f0f0" />
				</view>
			</view>
		</u-sticky>

		<view class="items-block" v-if="current === 0">
			<view v-if="yxgj_list.length > 0">
				<view v-for="(item,index) in yxgj_list" :key="index" class="item-wrap">
					<u-gap height="20" bg-color="#F7F8FA" v-show="index > 0" />
					<view class="item-block">
						<view class="item-cell">
							<view class="dot" />
							<view class="label">电站名称：</view>
							<view class="value">{{item[1]}}</view>
						</view>
						<view class="item-cell">
							<view class="dot" />
							<view class="label">设备名称：</view>
							<view class="value">{{item[2]}}</view>
						</view>
						<view class="item-cell">
							<view class="dot" />
							<view class="label">报警详情：</view>
							<view class="value">{{item[3]}}</view>
						</view>
						<view class="item-cell item-cell-time">
							<view class="label">事件时间：</view>
							<view class="value">{{item[5]}}</view>
						</view>
					</view>
					<view class="tag">
						<u-tag :text="item[4]" shape="circle" />
					</view>
				</view>
			</view>
			<u-empty margin-top="200" v-else />
		</view>


		<view class="items-block" v-if="current === 1">
			<view v-if="txgj_list.length > 0">
				<view v-for="(item,index) in txgj_list" :key="index" class="item-wrap">
					<u-gap height="20" bg-color="#F7F8FA" v-show="index > 0" />
					<view class="item-block">
						<view class="item-cell">
							<view class="dot" />
							<view class="label">站点名称：</view>
							<view class="value">{{item[1]}}</view>
						</view>
						<view class="item-cell">
							<view class="dot" />
							<view class="label">设备名称：</view>
							<view class="value">{{item[2]}}</view>
						</view>
						<view class="item-cell">
							<view class="dot" />
							<view class="label">报警详情：</view>
							<view class="value">{{item[3]}}</view>
						</view>
						<view class="item-cell item-cell-time">
							<view class="label">事件时间：</view>
							<view class="value">{{item[5]}}</view>
						</view>
					</view>
					<view class="tag">
						<u-tag :text="item[4]" shape="circle" />
					</view>
				</view>
			</view>
			<u-empty margin-top="200" v-else />
		</view>

		<view class="items-block" v-if="current === 2">
			<view v-if="ljgj_list.length > 0">
				<view v-for="(item,index) in ljgj_list" :key="index" class="item-wrap">
					<u-gap height="20" bg-color="#F7F8FA" v-show="index > 0" />
					<view class="item-block">
						<view class="item-cell">
							<view class="dot" />
							<view class="label">站点名称：</view>
							<view class="value">{{item[1]}}</view>
						</view>
						<view class="item-cell">
							<view class="dot" />
							<view class="label">设备名称：</view>
							<view class="value">{{item[2]}}</view>
						</view>
						<view class="item-cell">
							<view class="dot" />
							<view class="label">报警详情：</view>
							<view class="value">{{item[3]}}</view>
						</view>
						<view class="item-cell item-cell-time">
							<view class="label">事件时间：</view>
							<view class="value">{{item[5]}}</view>
						</view>
					</view>
					<view class="tag">
						<u-tag :text="item[4]" shape="circle" />
					</view>
				</view>
			</view>
			<u-empty margin-top="200" v-else />
		</view>

		<u-modal v-model="showModel" :show-confirm-button="false" :show-title="false">
			<view class="slot-content">
				<u-image :src="warningInfo.val === '0' ? '/static/warning/success.png':'/static/warning/error.png'"
					width="140" height="140" mode="aspectFit" />
				<view class="tips">{{warningInfo.val === '0'?'故障已成功恢复':'故障尚未恢复'}}</view>
				<u-button :hair-line="false" plain shape="circle" class="btn" @click="closePage">我知道了</u-button>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stickyEnable: true,
				showModel: false,
				warningInfo: {
					station_name: null,
					pt_name: null,
					dgt_name: null,
					val: "0",
					update_time: null
				},
				current: 0,
				keyword: null,
				yxgj_list: [],
				yxgj_list_bak: [],
				txgj_list: [],
				txgj_list_bak: [],
				ljgj_list: [],
				ljgj_list_bak: []
			}
		},
		computed: {
			tabs() {
				return [{
					name: `遥信告警(${this.yxgj_list ? this.yxgj_list.length : 0})`
				}, {
					name: `通信告警(${this.txgj_list ? this.txgj_list.length : 0})`
				}, {
					name: `连接告警(${this.ljgj_list ? this.ljgj_list.length : 0})`
				}]
			}
		},
		onLoad(options) {
			// alert(options.id + '---' + options.type)
			if (options.id && options.type != 1) { //这个id是公众号消息，点击进入的，是外部id不是站点id
				this.loadWarningAlarm(options.id, options.type)
			} else if (options.id) {
				this.loadWarning(options.id)
			}
		},
		onShow() {
			this.stickyEnable = true
			//只有不是公众号过来的请求，才真实的去查询告警信息
			let stationId = null
			let station = uni.getStorageSync('warning_station')
			if (station) {
				stationId = station.id
				this.keyword = station.name
			}
			this.loadYxgjList(stationId)
			this.loadTxgjList(stationId)
			this.loadLjgjList(stationId)
		},
		onHide() {
			this.stickyEnable = false
			uni.removeStorageSync('warning_station')
			this.keyword = null
			this.current = 0
		},
		methods: {
			//遥信告警
			loadYxgjList(stationId) {
				if (stationId) {
					this.$u.api.getYxGjListForStation({
						stationId: stationId
					}).then(res => {
						if (res && res.data) {
							this.yxgj_list = res.data
							//copy it
							this.yxgj_list_bak = JSON.parse(JSON.stringify(this.yxgj_list))
						}
					})
				} else {
					this.$u.api.getYxGjListForAll().then(res => {
						if (res.error_code === 0) {
							this.yxgj_list = res.data
							//copy it
							this.yxgj_list_bak = JSON.parse(JSON.stringify(this.yxgj_list))
						}
					})
				}

			},
			//通讯告警
			loadTxgjList(stationId) {
				if (stationId) {
					this.$u.api.getTxgjListForStation({
						stationId: stationId
					}).then(res => {
						if (res && res.data) {
							this.txgj_list = res.data
							//copy it
							this.txgj_list_bak = JSON.parse(JSON.stringify(this.txgj_list))
						}
					})
				} else {
					this.$u.api.getTxgjListForAll().then(res => {
						if (res.error_code === 0) {
							this.txgj_list = res.data
							//copy it
							this.txgj_list_bak = JSON.parse(JSON.stringify(this.txgj_list))
						}
					})
				}
			},
			//连接告警
			loadLjgjList(stationId) {
				if (stationId) {
					this.$u.api.getLjgjListForStation({
						stationId: stationId
					}).then(res => {
						if (res && res.data) {
							this.ljgj_list = res.data
							//copy it
							this.ljgj_list_bak = JSON.parse(JSON.stringify(this.ljgj_list))
						}
					})
				} else {
					this.$u.api.getLjgjListForAll().then(res => {
						if (res.error_code === 0) {
							this.ljgj_list = res.data
							//copy it
							this.ljgj_list_bak = JSON.parse(JSON.stringify(this.ljgj_list))
						}
					})
				}
			},
			loadWarning(id) {
				this.$u.api.getWarning({
					id: id
				}).then(res => {
					if (res.error_code === 0 && res.data.length > 0) {
						this.warningInfo = res.data[0]
						this.showModel = true
					}
				})
			},

			loadWarningAlarm(id, type) {
				this.$u.api.getWarningAlarm({
					id: id,
					type: type
				}).then(res => {
					// alert('res' + JSON.stringify(res))
					//data = 1已经恢复 data=0 没有恢复
					if (res.error_code === 0) {
						this.warningInfo.val = res.data === 1 ? "1" : "0"
						this.showModel = true
					}
				})
			},

			changeTab(index) {
				if (this.current === index) return
				this.current = index
				let stationId = null
				let station = uni.getStorageSync('warning_station')
				if (station) stationId = station.id
				if (index === 0) {
					this.loadYxgjList(stationId)
				} else if (index === 1) {
					this.loadTxgjList(stationId)
				} else if (index === 2) {
					this.loadLjgjList(stationId)
				}
			},
			doSearch() {
				// debugger
				if (this.keyword !== null && this.keyword !== '') {
					if (this.current === 0) {
						this.yxgj_list = this.yxgj_list.filter(item => item[1].indexOf(this.keyword) !== -1)
					} else if (this.current === 1) {
						this.txgj_list = this.txgj_list.filter(item => item[1].indexOf(this.keyword) !== -1)
					} else if (this.current === 2) {
						this.ljgj_list = this.ljgj_list.filter(item => item[1].indexOf(this.keyword) !== -1)
					}
				} else {
					//clean the condition
					let that = this
					this.keyword = null
					uni.removeStorage({
						key: 'warning_station',
						success() {
							that.loadYxgjList(null)
							that.loadTxgjList(null)
							that.loadLjgjList(null)
						}
					})
					//revert copy
					this.yxgj_list = JSON.parse(JSON.stringify(this.yxgj_list_bak))
					this.txgj_list = JSON.parse(JSON.stringify(this.txgj_list_bak))
					this.ljgj_list = JSON.parse(JSON.stringify(this.ljgj_list_bak))
				}
			},
			closePage() {
				this.showModel = false
				// #ifdef H5
				let ua = window.navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					window.WeixinJSBridge.call("closeWindow")
				}
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		padding-bottom: 40upx;

		.header-block {
			background-color: #fff;
			padding-top: 40upx;

			.search-block {
				padding: 0 32upx;
			}

			.tab-block {
				padding: 0 32upx;
			}

		}

		.item-wrap {
			position: relative;

			.item-block {
				padding: 30upx 40upx;

				.item-cell {
					margin-top: 8upx;
					font-size: 28upx;
					display: flex;
					align-items: center;

					.dot {
						width: 10upx;
						height: 10upx;
						background: #54E46B;
						border-radius: 50%;
					}

					.label {
						color: #999;
						margin-left: 10upx;
					}

					.value {
						color: #666;
					}
				}

				.item-cell-time {
					font-size: 24upx;
					margin-left: 10upx;
					margin-top: 30upx;
					color: #999;

					.value {
						color: #999;
					}
				}
			}

			.tag {
				position: absolute;
				right: 40upx;
				top: 50upx;
			}
		}

		.slot-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-bottom: 86upx;
			padding-top: 100upx;

			.tips {
				margin-top: 40upx;
			}

			.btn {
				width: 298upx;
				height: 80upx;
				background: linear-gradient(180deg, #FFC479 0%, #FF9244 100%);
				color: #fff;
				margin-top: 122upx;
			}
		}
	}
</style>
